import React from 'react';
import { Modal, Form, Input, Select, Switch, InputNumber, Button, Checkbox, TimePicker, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const TimeRangePicker = TimePicker.RangePicker;

const { Option } = Select;
const { TextArea } = Input;

const CouponFormModal = ({ visible, onCancel, onFinish, form, title, stores, venues }) => {
  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      footer={null}
      width={700}
      destroyOnClose
    >
      <Form
        form={form}
        onFinish={onFinish}
        layout="vertical"
      >
        <Form.Item label="优惠券名称" name="name" rules={[{ required: true, message: '请输入优惠券名称' }]}>
          <Input placeholder="请输入优惠券名称" />
        </Form.Item>
        <Form.Item label="优惠券类型" name="type" rules={[{ required: true, message: '请选择优惠券类型' }]}>
          <Select placeholder="请选择优惠券类型">
            <Option value={0}>折扣券</Option>
            <Option value={1}>现金券</Option>
            <Option value={2}>满减券</Option>
            <Option value={3}>时长券</Option>
            <Option value={4}>免费券</Option>
            <Option value={5}>赠品券</Option>
            <Option value={6}>特价券</Option>
          </Select>            
        </Form.Item>          
        <Form.Item label="状态" name="status" valuePropName="checked">            
          <Switch checkedChildren="启用" unCheckedChildren="禁用" />
        </Form.Item>  
        <Form.Item label="有效期" name="valid_days" rules={[{ required: true, message: '请输入有效期' }]}>
          <InputNumber min={1} placeholder="请输入有效期（天）" style={{ width: '100%' }} />   
        </Form.Item>          
        
        {/* 根据优惠券类型显示不同的表单项 */}
        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}>
          {({ getFieldValue }) => {
            const type = getFieldValue('type');
            
            if (type === 0) { // 折扣券
              return (
                <>
                  <Form.Item label="折扣" name="discount" rules={[{ required: true, message: '请输入折扣' }]}>
                    <InputNumber min={0} max={10} step={0.1} placeholder="请输入折扣，如8.5表示8.5折" style={{ width: '100%' }} />             
                  </Form.Item>
                  <Form.Item label="使用门槛" name="minAmount">
                    <InputNumber min={0} placeholder="请输入使用门槛（元），不填表示无门槛" style={{ width: '100%' }} />  
                  </Form.Item>
                  <Form.Item label="最大优惠" name="maxAmount">
                    <InputNumber min={0} placeholder="请输入最大优惠（元），不填表示无上限" style={{ width: '100%' }} />
                  </Form.Item>
                </>
              );
            }
            
            if (type === 1) { // 现金券
              return (
                <Form.Item label="现金券金额" name="value" rules={[{ required: true, message: '请输入现金券金额' }]}>
                  <InputNumber min={0} placeholder="请输入现金券金额（元）" style={{ width: '100%' }} />
                </Form.Item>
              );
            }

            if (type === 2) { // 满减券
              return (
                <>
                  <Form.Item label="使用门槛" name="min_consume" rules={[{ required: true, message: '请输入使用门槛' }]}>
                    <InputNumber min={0} placeholder="请输入使用门槛（元）" style={{ width: '100%' }} />
                  </Form.Item>
                  <Form.Item label="满减金额" name="value" rules={[{ required: true, message: '请输入满减金额' }]}>
                    <InputNumber min={0} placeholder="请输入满减金额（元）" style={{ width: '100%' }} />
                  </Form.Item>
                </>
              );
            }

            if (type === 3) { // 时长券
              return (
                <Form.Item label="时长（分钟）" name="duration" rules={[{ required: true, message: '请输入时长' }]}>
                  <InputNumber min={0} placeholder="请输入时长（分钟）" style={{ width: '100%' }} />
                </Form.Item>
              );
            }

            if (type === 4) { // 免费券
              return null; // 免费券通常没有额外需要填写的金额
            }

            if (type === 5) { // 赠品券
              return (
                <Form.Item label="赠品说明" name="description">
                  <TextArea rows={2} placeholder="请输入赠品说明" />
                </Form.Item>
              );
            }

            if (type === 6) { // 特价券
              return (
                <Form.Item label="特价金额" name="value" rules={[{ required: true, message: '请输入特价金额' }]}>
                  <InputNumber min={0} placeholder="请输入特价金额（元）" style={{ width: '100%' }} />
                </Form.Item>
              );
            }
            
            return null;
          }}
        </Form.Item>
        
        <Form.Item label="描述" name="description">
          <TextArea rows={4} placeholder="请输入优惠券描述" />
        </Form.Item>
        
        <Form.Item label="发行数量" name="total_count">
          <InputNumber min={0} placeholder="请输入发行数量，0表示不限量" style={{ width: '100%' }} />
        </Form.Item>
        
        <Form.Item label="每人限领" name="per_limit">
          <InputNumber min={1} placeholder="请输入每人限领数量" style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item label="可用星期" name="available_weekdays">
          <Checkbox.Group>
            <Checkbox value="1">周一</Checkbox>
            <Checkbox value="2">周二</Checkbox>
            <Checkbox value="3">周三</Checkbox>
            <Checkbox value="4">周四</Checkbox>
            <Checkbox value="5">周五</Checkbox>
            <Checkbox value="6">周六</Checkbox>
            <Checkbox value="0">周日</Checkbox>
          </Checkbox.Group>
        </Form.Item>

        <Form.List name="available_times">
          {(fields, { add, remove }) => (
            <>
              {fields.map((field, index) => (
                <Form.Item
                  label={index === 0 ? '可用时段' : ''}
                  required={false}
                  key={field.key}
                >
                  <Space>
                    <Form.Item
                      {...field}
                      rules={[
                        {
                          required: true,
                          message: '请选择时间范围',
                        },
                      ]}
                      noStyle
                    >
                      <TimeRangePicker format="HH:mm" />
                    </Form.Item>
                    <MinusCircleOutlined
                      onClick={() => remove(field.name)}
                    />
                  </Space>
                </Form.Item>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  style={{ width: '100%' }}
                  icon={<PlusOutlined />}
                >
                  添加时间段
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>

        <Form.Item label="适用范围" name="applicable_type">
          <Select placeholder="请选择适用范围">
            <Option value={0}>全场通用</Option>
            <Option value={1}>指定门店</Option>
            <Option value={2}>指定包厢</Option>
          </Select>
        </Form.Item>

        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.applicable_type !== currentValues.applicable_type}
        >
          {({ getFieldValue }) => {
            const applicableType = getFieldValue('applicable_type');
            if (applicableType === 1) {
              return (
                <Form.Item label="适用门店" name="applicable_ids">
                  <Select mode="multiple" placeholder="请选择适用的门店">
                    {stores.map(store => (
                      <Option key={store.id} value={store.id}>{store.name}</Option>
                    ))}
                  </Select>
                </Form.Item>
              );
            } else if (applicableType === 2) {
              return (
                <Form.Item label="适用包厢" name="applicable_ids">
                  <Select mode="multiple" placeholder="请选择适用的包厢">
                    {venues.map(venue => (
                      <Option key={venue.id} value={venue.id}>{venue.name}</Option>
                    ))}
                  </Select>
                </Form.Item>
              );
            }
            return null;
          }}
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit">保存</Button>
        </Form.Item>  
      </Form>
    </Modal>
  );
};

export default CouponFormModal;